<template>
  <div class="flex justify-between text-[#e54c5f] mb-5">
    <div class="flex items-center cursor-pointer" @click="handleClick">
      <el-icon>
        <ArrowLeftBold />
      </el-icon>
      <span class="pl-5">{{$t('客户管理')}}</span>
    </div>
    <div>
      <el-button type="primary" class="w-28" v-if="enterpriseUserForm.mer_review_status === 3 ||
        personalUserForm.mer_review_status === 3
        " @click="handleAudit(1)">{{$t('审核通过')}}</el-button>

      <el-button class="w-28" v-if="enterpriseUserForm.mer_review_status === 3 ||
        personalUserForm.mer_review_status === 3
        " @click="handleAudit(2)">{{$t('审核拒绝')}}</el-button>
    </div>
  </div>
  <el-tabs type="border-card" @tab-click="handleTabClick" v-model="activeName">
  <!--企业账户-->
    <el-tab-pane :label="$t('企业账户')" name="1" :disabled="route.query.account_type != '2' && route.path == '/account/customer/update'">
      <el-skeleton :rows="8" animated :loading="loading">
        <EnterpriseUserForm :enterpriseUserForm="enterpriseUserForm" @submitEnterpriseUserForm="submitEnterpriseUserForm"
          @enterprisePersonSubmit="enterprisePersonSubmit" />
      </el-skeleton>
    </el-tab-pane>
   <!-- 个人账户 -->
    <el-tab-pane :label="$t('个人账户')" name="2" :disabled="route.query.account_type != '2' && route.path == '/account/customer/update'">
      <el-skeleton :rows="8" animated :loading="loading">
        <PersonalUserForm @submitPersonalUserForm="submitPersonalUserForm" @thatPersonSubmit="thatPersonSubmit"
          :personalUserForm="personalUserForm" />
      </el-skeleton>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import {
  kycSaveApi,
  kycSubmitApi,
  kycInfoApi,
  kycAuditApi,
} from "@/api/account/index";
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import PersonalUserForm from "./personalUserForm.vue";
import EnterpriseUserForm from "./enterpriseUserForm.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter();
const loading = ref(false);
const { ...route } = useRoute();
// 企业用户表单数据
const enterpriseUserForm = reactive({
  // real_name: "",
  account_type: 1,
  company_name: "",
  pay_way: "",
  receive_country: "",
  receive_address: "",
  bank_name: "",
  bank_country: "",
  bank_city: "",
  bank_address: "",
  bank_swift: "",
  // receive_city: "",
  bank_iban: "",
  bank_card_number: "",
  currency: "",

  //企业--个人
  real_name: "",
  contact: "",
  file_idcard_front: "",
  file_idcard_back: "",
  file_idcard_hand: "",

  file_company_certificate: "",
  file_company_address: "",
  file_latest_register: "",
  file_bank_statement: "",
  file_latest_report: "",
  file_supplier_agreement: "",
  file_financial_statements: "",
  file_sale_agreement: "",
  file_stock_certificate: "",
  file_kaihu_zhengjian: "",
  file_invoice: "",
  file_kaihu_zhengjian_addr: "",
  file_board_member_address: "",
  file_company_organization: "",

  mer_review_status: 0,
});
// 个人用户表单数据
const personalUserForm = reactive({
  account_type: 2,
  real_name: "",
  contact: "",
  file_idcard_front: "",
  file_idcard_back: "",
  file_idcard_hand: "",
  mer_review_status: 0,
});
let savedId = ref(""); // 用于存储保存成功后的id值

const activeName = ref("1");

onMounted(() => {
  if (route.query.account_type) {
    activeName.value = route.query.account_type;
  }
  if (route.query.kycId) {
    getCustomerManagementDetail(route.query.kycId);
  }
});

const getCustomerManagementDetail = async (kycId) => {
  try {
    loading.value = true;
    const res = await kycInfoApi({ id: kycId });
    // 2个人客户
    if (res.account_type == 2) {
      // (personalUserForm.company_name = res.company_name),
      (personalUserForm.real_name = res.real_name),
        // (personalUserForm.user_phone = res.user_phone),
        (personalUserForm.contact = res.contact),
        (personalUserForm.mer_review_status = res.mer_review_status),
        (personalUserForm.sys_review_status = res.sys_review_status),
        (personalUserForm.file_host = res.file_host),
        (personalUserForm.file_idcard_front = `${res.file_data.idcard_front}`),
        (personalUserForm.file_idcard_back = `${res.file_data.idcard_back}`),
        (personalUserForm.file_idcard_hand = `${res.file_data.idcard_hand}`);
    }
    //1企业客户
    if (res.account_type == 1) {
      activeName.value = '1';
      for (let key in res) {
        enterpriseUserForm[key] = res[key];
      }
    }
    savedId.value = enterpriseUserForm.id;
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
// 当前选中的选项卡
// let currentTab = "个人用户";
// 点击选项卡时切换选项卡
const handleTabClick = (tab) => {
  // currentTab = tab.label;
  savedId.value = "";
};
const submitEnterpriseUserForm = async () => {
  // let opt_type = savedId? '2' : '0' // 0添加 2更新
  const data = {
    // opt_type: route.query.opt_type ? route.query.opt_type : 0,
    opt_type: 1,
    account_type: 1,  //1企业用户
    //必填信息
    company_name: enterpriseUserForm.company_name,
    pay_way: enterpriseUserForm.pay_way,
    receive_country: enterpriseUserForm.receive_country,
    receive_address: enterpriseUserForm.receive_address,
    bank_name: enterpriseUserForm.bank_name,
    bank_country: enterpriseUserForm.bank_country,
    bank_city: enterpriseUserForm.bank_city,
    bank_address: enterpriseUserForm.bank_address,
    bank_swift: enterpriseUserForm.bank_swift,
    bank_iban: enterpriseUserForm.bank_iban,
    bank_card_number: enterpriseUserForm.bank_card_number,
    currency: enterpriseUserForm.currency,
    // receive_city: enterpriseUserForm.receive_city,

    //企业 --个人模块
    real_name: enterpriseUserForm.real_name,
    contact: enterpriseUserForm.contact,
    file_idcard_front: enterpriseUserForm.file_idcard_front,
    file_idcard_back: enterpriseUserForm.file_idcard_back,
    file_idcard_hand: enterpriseUserForm.file_idcard_hand,
    //选填信息
    file_company_certificate: enterpriseUserForm.file_company_certificate,
    file_company_address: enterpriseUserForm.file_company_address,
    file_latest_register: enterpriseUserForm.file_latest_register,
    file_bank_statement: enterpriseUserForm.file_bank_statement,
    file_latest_report: enterpriseUserForm.file_latest_report,
    file_supplier_agreement: enterpriseUserForm.file_supplier_agreement,
    file_financial_statements: enterpriseUserForm.file_financial_statements,
    file_sale_agreement: enterpriseUserForm.file_sale_agreement,
    file_stock_certificate: enterpriseUserForm.file_stock_certificate,
    file_kaihu_zhengjian: enterpriseUserForm.file_kaihu_zhengjian,
    file_invoice: enterpriseUserForm.file_invoice,
    file_kaihu_zhengjian_addr: enterpriseUserForm.file_kaihu_zhengjian_addr,
    file_board_member_address: enterpriseUserForm.file_board_member_address,
    file_company_organization: enterpriseUserForm.file_company_organization,
  };
  // //如果是编辑加id
  if (route.query.kycId) {
    data.id = route.query.kycId;
  }
  try {
    const response = await kycSaveApi(data);
    ElMessage.success(t("保存成功"));
    savedId.value = response.id;
  } catch (error) {
    ElMessage.error(t("保存失败"));
  }
  // return savedId;
};
// 企业用户提交审核
const enterprisePersonSubmit = () => {
  ElMessageBox.confirm(t("是否提交审核"), {
    confirmButtonText: t("确定"),
    confirmButtonIcon: "Check",
    cancelButtonText: t("取消"),
    cancelButtonIcon: "Close",
    center: true,
  })
    .then(async () => {
      const data = {
        // opt_type: route.query.opt_type ? route.query.opt_type : 0,
        opt_type: 0,
        account_type: 1,  //1企业用户
        company_name: enterpriseUserForm.company_name,
        pay_way: enterpriseUserForm.pay_way,
        receive_country: enterpriseUserForm.receive_country,
        receive_address: enterpriseUserForm.receive_address,
        bank_name: enterpriseUserForm.bank_name,
        bank_country: enterpriseUserForm.bank_country,
        bank_city: enterpriseUserForm.bank_city,
        bank_address: enterpriseUserForm.bank_address,
        bank_swift: enterpriseUserForm.bank_swift,
        bank_iban: enterpriseUserForm.bank_iban,
        bank_card_number: enterpriseUserForm.bank_card_number,
        currency: enterpriseUserForm.currency,
        // receive_city: enterpriseUserForm.receive_city,
        real_name: enterpriseUserForm.real_name,
        contact: enterpriseUserForm.contact,
        file_idcard_front: enterpriseUserForm.file_idcard_front,
        file_idcard_back: enterpriseUserForm.file_idcard_back,
        file_idcard_hand: enterpriseUserForm.file_idcard_hand,
        file_company_certificate: enterpriseUserForm.file_company_certificate,
        file_company_address: enterpriseUserForm.file_company_address,
        file_latest_register: enterpriseUserForm.file_latest_register,
        file_bank_statement: enterpriseUserForm.file_bank_statement,
        file_latest_report: enterpriseUserForm.file_latest_report,
        file_supplier_agreement: enterpriseUserForm.file_supplier_agreement,
        file_financial_statements: enterpriseUserForm.file_financial_statements,
        file_sale_agreement: enterpriseUserForm.file_sale_agreement,
        file_stock_certificate: enterpriseUserForm.file_stock_certificate,
        file_kaihu_zhengjian: enterpriseUserForm.file_kaihu_zhengjian,
        file_invoice: enterpriseUserForm.file_invoice,
        file_kaihu_zhengjian_addr: enterpriseUserForm.file_kaihu_zhengjian_addr,
        file_board_member_address: enterpriseUserForm.file_board_member_address,
        file_company_organization: enterpriseUserForm.file_company_organization,
      };
      // console.log("====", enterpriseUserForm);
      // //如果是编辑加id
      if (route.query.kycId) {
        data.id = route.query.kycId;
      }

      try {
        if (savedId.value) {
          const response = await kycSaveApi({ id: savedId.value, ...data });
        } else {
          const response = await kycSaveApi(data);
        }
        ElMessage.success(t("提交成功"));
        router.replace(`/account/customer`);
      } catch (error) {
        ElMessage.error(t("提交失败"), error);
      }
    })
    .catch(() => { });
};

// // 提交个人用户表单
const submitPersonalUserForm = async (param) => {
  const data = {
    account_type: 2,
    real_name: personalUserForm.real_name,
    contact: personalUserForm.contact,
    file_idcard_front: personalUserForm.file_idcard_front,
    file_idcard_back: personalUserForm.file_idcard_back,
    file_idcard_hand: personalUserForm.file_idcard_back,
    opt_type: 1,
  };
  // //如果是编辑加id
  if (route.query.kycId) {
    data.id = route.query.kycId;
  }
  try {
    const response = await kycSaveApi(data);
    ElMessage.success(t("保存成功"));
    savedId.value = response.id;
  } catch (error) {
    ElMessage.error(t("保存失败"), error);
  }
  // return savedId;
};
const thatPersonSubmit = async () => {
  // console.log("个人提交审核");
  const data = {
    account_type: 2,
    real_name: personalUserForm.real_name,
    contact: personalUserForm.contact,
    file_idcard_front: personalUserForm.file_idcard_front,
    file_idcard_back: personalUserForm.file_idcard_back,
    file_idcard_hand: personalUserForm.file_idcard_hand,
    opt_type: 0,
  };
  // //如果是编辑加id
  if (route.query.kycId) {
    data.id = route.query.kycId;
  }
  ElMessageBox.confirm(t("是否提交审核"), {
    confirmButtonText: t("确定"),
    confirmButtonIcon: "Check",
    cancelButtonText: t("取消"),
    cancelButtonIcon: "Close",
    center: true,
  })
    .then(async () => {
      try {
        if (savedId.value) {
          const response = await kycSaveApi({ id: savedId.value, ...data });
        } else {
          const response = await kycSaveApi(data);
        }
        ElMessage.success(t("提交成功"));
        router.replace(`/account/customer`);
      } catch (error) {
        ElMessage.error(t("提交失败"), error);
      }
    })
    .catch(() => { });
};
// 审核
const handleAudit = async (param) => {
  try {
    const res = await kycAuditApi({ id: route.query.kycId, status: param });
    if (param == 1) {
      ElMessage.success("审核通过");
    } else {
      ElMessage.success("拒绝审核");
    }
    router.replace(`/account/customer`);
  } catch (error) {
    console.log(error);
  }
};
// 路由导航函数
const handleClick = () => {
  router.replace(`/account/customer`);
};
</script>
<style scoped>
.form-column {
  float: left;
  width: 50%;
  box-sizing: border-box;
  padding-right: 20px;
}

.form-column:last-child {
  padding-right: 30px;
  /* 最后一列不需要右边距 */
}

/* .card {
    display: flex;
} */

:deep(.el-form-item) {
  margin-bottom: 20px;
}

.submit-button {
  text-align: center;
  margin-top: 20px;
}

:deep(.el-upload-list--picture-card) {
  width: 192px;
  height: 112px;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 192px;
  height: 112px;
}

:deep(.el-upload--picture-card) {
  width: 192px;
  height: 112px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

:deep(.front_box .el-upload--picture-card) {
  display: none;
}

:deep(.back_box .el-upload--picture-card) {
  display: none;
}

:deep(.hand_box .el-upload--picture-card) {
  display: none;
}

.uploadDiv {
  margin-right: 30px;
}
</style>
